<template>
	<view class="page bg-white">
		<swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
			:autoplay="true" interval="5000" duration="500">
			<swiper-item v-for="(item,index) in swiperList" :key="index">

				<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
				<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover"
					v-if="item.type=='video'"></video>
			</swiper-item>
		</swiper>
		<view class="cu-list menu  " style="width: 100vw;left: 0;">
			<view class="cu-item">
				<view class="content bg-gray ">
					<text class="cuIcon-notice text-green"></text>
					<text class="text-grey">通知消息 </text>
				</view>
				
			</view>
		</view>

		<view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']">
			<view class="cu-item" v-for="(item,index) in cuIconList" :key="index" v-if="index<gridCol*2"
				@click="toJump(item.type,item.path)">
				<view>
					<image style="width: 50%;" :src="item.img" mode="widthFix"></image>

					<view class="cu-tag badge" v-if="item.badge!=0">
						<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
					</view>
				</view>
				<text>{{item.name}}</text>
				<view class="list-tag text-sm">{{item.name}}</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		name: "home",
		data() {
			return {

				cardCur: 0,
				swiperList: [{
						id: 4,
						type: 'image',
						url: '/static/img/home/register.png'
					}

				],
				dotStyle: true,
				towerStart: 0,
				direction: '',
				cuIconList: [{
						cuIcon: 'cardboardfill',
						color: 'red',
						badge: 0,
						img: "/static/img/home/zuqiu_icon@3x.png",
						name: '竞彩足球',
						path: "/pages/order/downOrder",
						type: 0,
					},
					{
						cuIcon: 'recordfill',
						color: 'orange',
						badge: 0,
						name: '竞彩篮球',
						img: "/static/img/home/lanqiu_icon@3x.png",
						path: "",
						type: -1,
						
					}


				],
				modalName: null,
				gridCol: 3,
				gridBorder: false,
				menuBorder: false,
				menuArrow: false,
				menuCard: false,
				skin: false,
				listTouchStart: 0,
				listTouchDirection: null,

			}
		},
		onLoad() {
			this.TowerSwiper('swiperList');
		},
		mounted() {
			this.TowerSwiper('swiperList');
		},
		methods: {

			// towerSwiper
			// 初始化towerSwiper
			TowerSwiper(name) {
				let list = this[name];
				for (let i = 0; i < list.length; i++) {
					list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
					list[i].mLeft = i - parseInt(list.length / 2)
				}
				this.swiperList = list
			},
			/**
			 * 类型
			 * 
			 */
			toJump(...dat) {
				switch (dat[0]) {
					case 0:
						uni.navigateTo({
							url: dat[1]
						})
						break;
						case -1:
						uni.showToast({
							title:"开发中",
							icon:"none"
						})
						
						break;
				}

			}
		}
	}
</script>

<style>
	.tower-swiper .tower-item {
		transform: scale(calc(0.5 + var(--index) / 10));
		margin-left: calc(var(--left) * 100upx - 150upx);
		z-index: var(--index);
	}

	.list-tag {
		border: 1px solid #F8CF3C;
		padding-left: 10rpx;
		padding-right: 10rpx;
		margin: auto;
		font-size: 28rpx;
		border-radius: 20rpx;
		background-color: rgba(248, 207, 060, 0.05);
		color: #F8CF3C;
	}
</style>
